<template>
  <div class="cms-content" :class="{ 'is-mobile': $isMobile }">
    <div v-for="item in list" :key="item.id" class="cms-leader">
      <i></i>
      <div class="title"> {{ item.title }}:</div>
        <span v-for="(name, index) in item.data" :key="index" class="name"> {{ name }}</span>
    </div>
  </div>
</template>
  
<script>
export default {

  data() {
    return {
      list: [
        {
          id: 1,
          title: "会长",
          data: ['刘育才']
        },

        {
          id: 2,
          title: "副会长",
          data: ['王国晴', '沈国良', '许先辉', '卢坚胜', '罗冠生', '赵晓东', '贺斌', '贾嘉', '黄帮谦', '马士杰', '朱立新', '汤闯', '许德范', '李志弘', '林福康', '曹润亭', '谭小薇']


        },

        {
          id: 3,
          title: "秘书长",
          data: ["马健伟"]


        },
        {
          id: 4,
          title: "副秘书长",
          data: ["谭卓尔"]
        }
      ]
    }
  },

};
</script>
  
<style lang="less" scoped>
.cms-content {
  padding: 20px 0px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;

  .cms-leader {
    width: 100%;
    font-family: PingFangSC, PingFang SC;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-left: 18px;


    i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: block;
      background-color: #b80720;
      margin-right: 10px;
      position: relative;
      left: 0px;
    }


    .title {
      font-weight: bolder;
      font-size: 16px;
      color: #484848;
      cursor: pointer;
      line-height: 24px;
      padding-right: 10px;
    }

    .name {
      display: inline-flex;
      line-height: 24px;
      padding-right: 10px;
    }

  }

}


.cms-content.is-mobile {
  padding: 0;

  .cms-leader {
    font-size: 16px;
    line-height: 20px;
    height: max-content;
    margin-bottom: 10px;

    &:first-child {
      margin-top: 10px;
    }

    i {
      display: none;
    }
  }
}
</style>
  